<template>
  <div class="channel_wrapper">
    <header>
      <div class="title">
        <i></i>
        频道
      </div>
      <div class="nav">
        <a href="#">更多</a>
      </div>
    </header>
    <main>
      <a href="#" v-for="{name,follow_num,smallpic} in channel" :key="name">
        <div class="img_wrapper" >
          <img :src="smallpic" alt="">
          <div class="follow">
            <span>{{follow_num}}</span>
          </div>
        </div>
        <div class="title">{{name}}</div>
      </a>
    </main>
  </div>
</template>

<script>
import {getHotSound} from '../api/index';

export default {
  data:function(){
    return {
      channel:[]
    }
  },
async mounted(){
  // this.$store.dispatch("getSoundList");
  const {info} = await getHotSound();
  const {channel} = info;
  this.channel = channel;
  console.log(this.channel);
  },
}
</script>

<style lang="scss">
  .channel_wrapper{
    width:100%;
    height:3.66rem;
    margin:0.1rem 0;
    padding-bottom:0.16rem;
    position: relative;
    background:transparent;
    header{
      width:100%;
      height:0.4rem;
      padding:0 0.14rem;
      line-height:0.4rem;
      display:flex;
      justify-content: space-between;
      position:relative;
      .title{
        width:0.6rem;
        height:0.41rem;
        display:inline-block;
        font-size:0.16rem;
        text-align: center;
        word-break: break-all;
        i{
          display:inline-block;
          width:0.26rem;
          height:0.26rem;
          background-image: url("http://static.missevan.com/assets/m/images/build/sprite-icons-catalog@2x.f22564ff.png");
          background-size: 1.66rem 1.66rem;
          background-position:-0.28rem 0;
          position: relative;
          top: 0.07rem;
          margin-left:-0.03rem;
          line-height:0.4rem;
        }
      }
      .nav{
        width:0.44rem;
        height:0.4rem;
        font-size: 0.14rem;
        color: #9e9e9e;
        line-height:0.4rem;
        display: flex;
        justify-content: space-between;
        a{
          display: inline-block;
          max-width:0.66rem;
          text-align: center;
          width:0.44rem;
          height:0.4rem;
          font-size: 0.13rem;
          color: #9e9e9e;
        }
        ::after{
          background-size: 2.62rem 2.34rem;
          background-position: -2.23rem -1.32rem;
          width: 0.18rem;
          height: 0.18rem;
          background-image: url("http://static.missevan.com/assets/m/images/build/sprite-icons@2x.1592535d.png");
          content: "";
          display: inline-block;
          position: relative;
          top: 0.04rem;
          right: -0.03rem;
        }
      }
    }
    main{
      height: 3.1rem;
      margin:0 0.14rem;
      display:flex;
      justify-content: space-around;
      flex-wrap:wrap;
      align-items:center;
      a{
        display: inline-block;
        margin:0.03rem 0;
        width: calc(50vw - 28px);
        height:1.5rem;
        margin:0.03rem 0;
        .img_wrapper{
          width:1.6rem;
          height:1.06rem;
          position: relative;
          overflow:hidden;
          img{
            width:1.6rem;
            height:1.06rem;
            position: relative;
          }
          .follow{
            width:0.8rem;
            height:0.2rem;
            padding:0 0.05rem;
            z-index: 20;
            border-top-right-radius: 0.04rem;
            background-image: linear-gradient(90deg,transparent,rgba(0,0,0,.2));
            text-align: right;
            position: absolute;
            top: 0;
            right: 0;
            span{
              width: 0.512rem;
              height:0.2rem;
              padding-left:0.18rem;
              float: right;
              position: relative;
              line-height: 0.2rem;
              z-index:20;
              color: #fff;
              font-size: 0.12rem;
              text-align: right;
              text-shadow: 0 1px 1px rgba(0,0,0,.7);
            }
            ::before{
              content: "";
              position: absolute;
              top: 0.04rem;
              left: 0;
              width: 0.15rem;
              height: 0.13rem;
              z-index:20;
              background-image: url("http://static.missevan.com/assets/m/images/build/sprite-icons-thumbnails@2x.8e0a6b22.png");
              background-position: -0.18rem -0.26rem;
              background-size: 0.56rem 0.55rem;
            }
          }
        }
        .title{
          width:1.595rem;
          height: 0.4rem;
          margin-top:0.03rem;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          line-height: 0.2rem;
          font-size:0.13rem;
          color:#616161;
        }
      }
    }
  }
</style>